<template>
	<div class="content-index">
    <div id="allmap" class="allmap"></div>
		<div class="index-title">
			<div class="title-left">
        <van-icon name="location" />
        <span>当前定位: {{ city }}</span>
			</div>
			<div class="title-right">
        <van-search
          v-model="search"
          background="#60cbff"
          shape="round"
          placeholder="请输入搜索关键词"
          @focus="onSearch"
        />

			</div>
		</div>
		<div class="index-body" ref="body">
      <van-popup v-model="citylist" position="bottom">
        <van-area
          :area-list="areaList"
          :columns-num="2"
          @confirm="onConfirm"
          @cancel="citylist = false"
        />
      </van-popup>
			<van-tabs v-model="active" swipeable animated>
				<van-tab title="首页">
					<van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
						<van-list v-model="loading" :finished="finished" finished-text="没有更多了" offset="10" @load="onLoad">
							<div class="body-index-swipe">
								<van-swipe :autoplay="3000">
									<van-swipe-item v-for="(image, index) in images" :key="index">
										<img v-lazy="image" />
									</van-swipe-item>
								</van-swipe>
							</div>
              <div v-show="!relasele.length" class="body-index-loading" style="background-color: #ffffff">
                <van-skeleton title avatar :row="3" v-for="(item,index) of 3" :key="index"/>
              </div>
							<div class="body-index-show">
								<div class="show-bigboox">
									<div @click="gozpisd(item)" class="show-box" v-for="(item,index) of relasele" :key="index">
										<img :src="item.imgs[0]" alt="">
										<div class="show-text">
											<span>{{ item.themetext }}</span>
										</div>
										<div class="show-userinfo">
											<div class="userinfo-box">
												<img :src="item.user.uportrait" alt="">
												<span class="userinfo-uname">{{ item.user.username }}</span>
												<i v-show="item.user.sex == '男'" class="iconfont icon-nan"></i>
												<i v-show="item.user.sex == '女'" class="iconfont icon-nv"></i>
											</div>
											<div class="userinfo-box">
												<span class="box-read">阅读</span>
												<span class="read-num">{{ item.workflow }}</span>
											</div>
										</div>
									</div>
								</div>
								<div class="show-bigboox">
									<div @click="gozpisd(item)" class="show-box" v-for="(item,index) of relaserg" :key="index">
										<img :src="item.imgs[0]" alt="">
										<div class="show-text">
											<span>{{ item.themetext }}</span>
										</div>
										<div class="show-userinfo">
											<div class="userinfo-box">
												<img :src="item.user.uportrait" alt="">
												<span class="userinfo-uname">{{ item.user.username }}</span>
												<i v-show="item.user.sex == '男'" class="iconfont icon-nan"></i>
												<i v-show="item.user.sex == '女'" class="iconfont icon-nv"></i>
											</div>
											<div class="userinfo-box">
												<span class="box-read">阅读</span>
												<span class="read-num">{{ item.workflow }}</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</van-list>
					</van-pull-refresh>
				</van-tab>
				<van-tab title="约拍">
          <comyp :active="active" />
				</van-tab>
				<van-tab title="文章">
          <comjc :active="active" />
				</van-tab>
				<van-tab title="同城">
          <van-pull-refresh v-model="tcrefreshing" success-text="刷新成功" @refresh="ontcRefresh">
            <van-list
              v-model="tcloading"
              :finished="tcfinished"
              finished-text="没有更多了"
              @load="ontcLoad"
              offset="10"
            >
              <div class="city-box">
                <div class="city-title">
                  <van-cell
                    icon="location-o"
                    arrow-direction="down"
                    :title="city"
                    is-link
                    @click="citylist = true"
                    value="切换" />
                </div>
              </div>
              <van-empty
                v-show="tcempty"
                class="custom-image"
                image="https://img.yzcdn.cn/vant/custom-empty-image.png"
                description="目前还没有本地约拍的消息哦"
              />
              <van-skeleton v-show="tcskeleton" style="background-color: #ffffff" title avatar :row="5" v-for="(item,index) of 3" :key="index"/>
              <div class="ypbox-box">
                <div v-for="(item,index) of tclist" :key="index" class="box-msg" @click="gotoypisd(item)">
                  <div class="msg-uinfo">
                    <div class="ui-le">
                      <img :src="item.user.uportrait" alt="">
                      <div class="le-msg">
                        <span>{{ item.user.username }}</span>
                        <span>{{ item.newaddTime }}</span>
                      </div>
                    </div>
                    <div class="ui-rg">
                      <div class="rg-box">
                        <i class="iconfont icon-dizhi"></i>
                        <span>{{ item.apAdress.split(' ')[0] }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="msg-text">
                    <span>{{ item.aprequirement }}</span>
                    <span>期望拍摄时间: {{ item.newypTime }}</span>
                    <span>约{{ item.apType }}</span>
                    <div class="msg-theme">
                      <span>主题: </span>
                      <span v-for="(theme,index) of item.aptheme" :key="index">{{ theme }}</span>
                    </div>
                  </div>
                  <div class="msg-img">
                    <div class="img_box" v-for='(imgs,index) in item.imgs' :key='index' v-show="index<2">
                      <img :src="imgs" alt="" @click.stop="getImg(item.imgs,index)">
                      <div class="img-flow" v-if="item.imgs.length>2">
                        <span>+{{ item.imgs.length-1 }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="msg-cz">
                    <div class="cz-le">
                      <div class="le-gzbox">
                        <span>+ 关注</span>
                      </div>
                    </div>
                    <div class="cz-rg">
                      <div class="cz-box">
                        <i class="iconfont icon-dianzan2"></i>
                        <span>{{ item.thumbs.length }}</span>
                      </div>
                      <div class="cz-box">
                        <i class="iconfont icon-pinglun3"></i>
                        <span>{{ item.comments.length }}</span>
                      </div>
                      <div class="cz-box">
                        <i class="iconfont icon-fenxiang"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-list>
          </van-pull-refresh>

				</van-tab>
			</van-tabs>
		</div>
	</div>
</template>

<script>
	import {
		ImagePreview,
		Toast
	} from 'vant';
  import areaList from '@/Photography/assets/js/area'
  import comjc from '@/Photography/components/comjc';
  import comyp from '@/Photography/components/comyp';

	export default {
    components: {
      comjc,
      comyp,
    },
    name: "findex",
		data() {
			return {
        areaList: areaList,
        citylist: false,
			  city: '',
				search: '',
				active: '',
				isLoading: false,
				images: [
					'http://39.99.143.114:9999/blog/20201001/1601540218439.jpg',
					'https://icweiliimg6.pstatp.com/weili/sm/254329013950218271.jpg',
					'https://icweiliimg6.pstatp.com/weili/sm/483468396806406185.webp',
				],
				loading: false,
				finished: false,
        tclist: [],
				relasele: [],
				relaserg: [],
				zppage: 1,
				maxzppage: null,
        tcloading: false,
        tcfinished: false,
        tcrefreshing: false,
        tcempty: false,
        tcskeleton: false,
        tcpage: 1,
        maxtcpage: null,
			}
		},
		created() {
		  const { active } = this.$route.params
      if(active){
        this.active = active
      }
      this.zpfind()
      if(this.city){
        this.gettclist(this.city)
      }
		},
    mounted() {
      this.location()
      if(this.city){
        this.gettclist(this.city)
      }
    },
    methods: {
      onSearch(){
        this.$router.push('/search')
      },
      onConfirm(values) {
        this.city = values[1].name
        this.citylist = false;
      },
      location() {
        var that = this;
        var map = new BMap.Map("allmap");
        var point = new BMap.Point(116.331398, 39.897445);
        map.centerAndZoom(point, 12);
        function myFun(result) {
          var cityName = result.name;
          console.log(result)
          map.setCenter(cityName);
          that.city = cityName; // 城市名
        }
        var myCity = new BMap.LocalCity();
        myCity.get(myFun);
      },
      async gozpisd(item){
        try {
          const res = await this.$axios({
            url:'/blog/releaseupdate',
            method:"post",
            data:{
              releaseid: item.releaseid,
              workflow: parseInt(item.workflow) + 1,
            }
          })
          const {success, msg} = res.data
          if(success){
            item.workflow = parseInt(item.workflow) + 1
            this.$router.push({
              name: "zpisd",
              params: {
                release: item
              }
            })
          }else {
            Toast.fail(msg)
          }
        }catch (e) {
          Toast.fail(e)
        }
      },
      ontcRefresh(){
        this.tcempty = false
        this.tcskeleton = true
        this.tclist = []
        setTimeout(() => {
          this.tcpage = 1
          this.gettclist(this.city)
          this.tcrefreshing = false;
          this.tcfinished = false;
          this.tcskeleton = false
        }, 1000);
      },
      ontcLoad(){
        console.info("约拍加载")
        this.tcloading = true;
        if (this.tcpage > this.maxtcpage) {
          this.tcloading = false;
          this.tcfinished = true;
        }else {
          setTimeout(()=>{
            this.gettclist(this.city)
            this.tcloading = false;
          },1000)
        }
      },
      async gettclist(city){
        try {
          const res = await this.$axios({
            url: '/blog/appointlike',
            method: "post",
            data: {
              page: this.tcpage,
              search: city,
            }
          })
          const {
            success,
            msg,
            data,
            maxpage,
            length
          } = res.data
          if (success) {
            console.info(data)
            if(data.rows.length == 0 && this.tcpage == 1){
              this.tcempty = true
              this.tclist = []
            }else {
              this.tcempty = false
            }
            data.rows.map(r => {
              const year = new Date(r.addTime).getFullYear();
              const mouth = `${new Date(r.addTime).getMonth()+1}`.padStart(2, 0);
              const day = `${new Date(r.addTime).getDate()}`.padStart(2, 0);
              const ypyear = new Date(r.apTime).getFullYear();
              const ypmouth = `${new Date(r.apTime).getMonth()+1}`.padStart(2, 0);
              const ypday = `${new Date(r.apTime).getDate()}`.padStart(2, 0);
              r.newaddTime = `${year}-${mouth}-${day}`
              r.newypTime = `${ypyear}-${ypmouth}-${ypday}`
              r.imgs = []
              r.aptheme = r.aptheme.split(',')
              r.pictures.map(url => {
                r.imgs.push(url.photourl)
              })
            })
            data.rows.forEach(r=>{
              this.tclist.push(r)
            })
            console.info('同城',data.rows)
            this.tcpage++;
            this.maxtcpage = maxpage
          } else {
            Toast.fail(msg)
          }
        } catch (e) {
          Toast.fail(e)
        }
      },
			onRefresh() {
        this.relasele = []
        this.relaserg = []
				setTimeout(() => {
          this.zppage = 1
          this.zpfind()
					this.isLoading = false;
          this.finished = false;
				}, 1000);
			},
			onLoad() {
				console.info("加载数据")
				this.loading = true;
				if (this.zppage > this.maxzppage) {
          this.loading = false;
					this.finished = true;
				}else {
          setTimeout(()=>{
            this.zpfind()
            this.loading = false;
          },1000)
        }

			},
			async zpfind() {
				try {
					const res = await this.$axios({
						url: '/blog/releasefind',
						method: "post",
						data: {
							page: this.zppage,
						}
					})
					const {
						success,
						msg,
						data,
						length,
						maxpage
					} = res.data
					if (success) {
						data.map(r => {
							const year = new Date(r.addTime).getFullYear();
							const mouth = `${new Date(r.addTime).getMonth()+1}`.padStart(2, 0);
							const day = `${new Date(r.addTime).getDate()}`.padStart(2, 0);
							r.newaddTime = `${year}-${mouth}-${day}`
							r.imgs = []
							r.theme = r.theme.split(',')
							r.pictures.map(url => {
								r.imgs.push(url.photourl)
							})
						})
            console.info(data)
						data.forEach((r, index) => {
							if (index % 2 == 0) {
								this.relasele.push(r)
							} else {
								this.relaserg.push(r)
							}
						})
						this.maxzppage = maxpage;
            this.zppage++;
					} else {
						Toast.fail(msg)
					}
				} catch (e) {
					Toast.fail(e)
				}
			},
      async gotoypisd(item) {
        try {
          const res = await this.$axios({
            url: '/blog/appointupdate',
            method: "post",
            data: {
              appointmentid: item.appointmentid,
              browse: parseInt(item.browse) + 1,
            }
          })
          const {
            success,
            msg,
            data
          } = res.data
          if (success) {
            item.browse = parseInt(item.browse) + 1
            const params = {
              appointment: item,
              active: this.active,
            }
            if(this.uinfo){
              params.uinfo = this.uinfo
            }
            this.$router.push({
              name: "ypisd",
              params,
            })
          } else {
            Toast.fail(msg)
          }
        } catch (e) {
          Toast.fail(e)
        }
      },
		},
    watch:{
      city(){
		    this.ontcRefresh()
      },
    }
	}
</script>

<style scoped lang="scss">
	.content-index {
		height: 100%;
		display: flex;
		flex-direction: column;

		.index-title {
			height: vw(108);
			background-color: #60cbff;
			display: flex;
			align-items: center;

			.title-left {
        display: flex;
        align-items: center;
        color: #ffffff;
        padding-left: vw(20);
        span{
          padding-left: vw(10);
          font-size: vw(20);
        }
			}

			.title-right {
				flex: 1;
				.van-search {
					width: 100%;
          ::v-deep .van-search__action:active{
            background-color: #60cbff;
          }
				}
			}
		}

		.index-body {
			height: 0;
			flex-grow: 1;

			::v-deep .van-tabs {
				height: 100%;
				display: flex;
				flex-direction: column;

				.van-tab__pane-wrapper--inactive {
					overflow: auto;
				}

				.van-tab__pane-wrapper {
					height: 100%;
				}

				.van-tabs__content {
					height: 0;
					flex-grow: 1;
					overflow-y: auto;
					background-color: #f6f6f6;
				}

				.van-tabs__nav.van-tabs__nav--line {
					background-color: #60cbff;

					.van-tab {
						flex: none;
						width: vw(120);
					}

					.van-tabs__line {
						width: vw(60);
						background-color: #ffffff;
					}

					.van-tab.van-tab--active {
						font-size: vw(35);
					}

					.van-tab__text.van-tab__text--ellipsis {
						color: #ffffff;
						font-weight: bold;
					}
				}
			}

			.body-index-swipe {
				background-color: #ffffff;
				padding: vw(10) vw(25);
				margin-bottom: 0;

				img {
					width: 100%;
					height: vw(400);
					object-fit: cover;
				}
			}

			.body-index-show {
				width: vw(700);
				margin: 0 auto;
				display: flex;
				justify-content: space-around;

				.show-bigboox {
					flex: 1;

					.show-box {
						margin-top: vw(10);
						width: vw(340);
						display: flex;
						flex-direction: column;
						border-radius: vw(10);
						background-color: #ffffff;

						img {
							width: 100%;
							height: vw(500);
							object-fit: cover;
							border-top-left-radius: vw(10);
							border-top-right-radius: vw(10);
						}

						.show-text {
							padding: vw(15);
							box-sizing: border-box;
							max-width: 90%;

							span {
								font-size: vw(25);
								-webkit-line-clamp: 2;
								letter-spacing: 2px;
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								white-space: normal;
							}
						}

						.show-userinfo {
							display: flex;
							box-sizing: border-box;
							align-items: center;
							padding: 0 vw(15);
							box-sizing: border-box;
							justify-content: space-between;

							.userinfo-box {
								display: flex;
								align-items: center;
								padding-bottom: vw(15);
								box-sizing: border-box;

								img {
									width: vw(40);
									height: vw(40);
									border-radius: 50%;
									object-fit: cover;
								}

								.userinfo-uname {
									transform: scale(0.8);
									max-width: vw(100);
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
								}

								i {
									transform: scale(0.8);
									color: pink;
								}

								.box-read {
									transform: scale(0.7);
									color: #c1c1c1;
								}

								.read-num {
									transform: scale(0.7);
									color: #c1c1c1;
								}
							}
						}
					}
				}
			}

      .ypbox-box {
        overflow-y: auto;
        background-color: #ffffff;
        .box-msg {
          width: vw(690);
          margin: vw(10) auto;
          margin-bottom: 0;
          border-bottom: vw(10) solid #f6f6f6;
          .msg-uinfo {
            width: 100%;
            height: vw(100);
            display: flex;

            .ui-le {
              width: vw(510);
              display: flex;
              align-items: center;

              img {
                width: vw(85);
                height: vw(85);
                border-radius: 50%;
                object-fit: cover;
              }

              .le-msg {
                padding-left: vw(30);
                display: flex;
                flex-direction: column;
                line-height: vw(40);

                span {
                  font-size: vw(28);

                  &:last-child {
                    color: #d5d5d5;
                    font-size: vw(24);
                  }
                }

              }
            }

            .ui-rg {
              flex: 1;
              display: flex;
              justify-content: center;
              align-items: center;

              .rg-box {
                justify-content: center;
                display: flex;
                align-items: center;

                span {
                  padding-left: vw(10);
                  font-size: vw(25);
                }
              }
            }
          }

          .msg-text {
            display: flex;
            flex-direction: column;

            span {
              font-size: vw(28);
              color: #666666;

              &:first-child {
                font-size: vw(40);
                color: #000000;
              }
            }
          }

          .msg-img {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            padding-top: vw(10);

            .img_box {
              position: relative;

              img {
                width: vw(335);
                height: vw(500);
                object-fit: cover;
                &:first-child{
                  margin-right: vw(10);
                }
              }

              .img-flow {
                position: absolute;
                width: vw(50);
                height: vw(50);
                bottom: vw(10);
                right: 0;
                background-color: #00000070;
                display: flex;
                align-items: center;
                justify-content: center;

                span {
                  font-size: vw(30);
                  color: #b3aaaa;
                }
              }
            }
          }

          .msg-cz {
            display: flex;

            .cz-le {
              display: flex;
              align-items: center;

              .le-gzbox {
                width: vw(120);
                height: vw(40);
                border: 1px solid lightsalmon;
                border-radius: vw(20);
                justify-content: center;
                display: flex;
                align-items: center;

                span {
                  font-size: vw(20);
                  color: lightsalmon;
                }
              }
            }

            .cz-rg {
              flex: 1;
              display: flex;
              justify-content: flex-end;

              .cz-box {
                padding: vw(15);
                display: flex;
                align-items: center;

                i {
                  font-size: vw(40);
                }

                span {
                  margin-left: vw(10);
                  font-size: vw(30);
                }
              }
            }
          }
        }
      }

      .box-msg {
        width: vw(690);
        margin: vw(10) auto;

        .msg-img-box {
          img {
            width: 100%;
            height: vw(400);
            object-fit: cover;
          }
        }

        .msg-text {
          display: flex;
          flex-direction: column;
          font-size: vw(28);
          color: #666666;

          &>span {
            &:first-child {
              font-size: vw(40);
              color: #000000;
            }
          }

          .msg-theme {
            span {
              font-size: vw(28) !important;
              color: #666666 !important;
              padding-right: vw(10);
            }
          }
        }

        .msg-cz {
          display: flex;

          .cz-le {
            display: flex;
            align-items: center;

            span {
              font-size: vw(25);
              color: #d5d5d5;
            }
          }

          .cz-rg {
            flex: 1;
            display: flex;
            justify-content: flex-end;

            .cz-box {
              padding: vw(15);
              display: flex;
              align-items: center;

              i {
                font-size: vw(40);
              }

              span {
                margin-left: vw(10);
                font-size: vw(30);
              }
            }
          }
        }
      }
		}
	}
</style>
<style lang="scss">
	.van-popup.van-popup--top.van-dropdown-item__content {
		width: vw(300);
		background-color: #ffffff00;
	}

	.van-dropdown-menu__item {
		.van-dropdown-menu__title {
			.van-ellipsis {
				color: #ffffff !important;
				padding-right: vw(10);
				font-size: vw(20);
			}
		}
	}

	.van-dropdown-menu__bar {
		background-color: #ffffff00 !important;
		box-shadow: none !important;
	}
</style>
